<template>
  <div class="vesselBox">
    <el-radio-group v-model="titleTab" size="small">
      <el-radio label="自营" border>自营</el-radio>
      <el-radio label="购买" border>购买</el-radio>
    </el-radio-group>
    <el-row v-if="titleTab==='自营'" :gutter="20" style="margin-top:20px;">
      <el-col
        :span="4"
        style="border: 1px solid #eee;height: 600px;overflow: auto;margin-left: 10px;"
      >
        <h3 style="border-bottom:1px solid #eee;padding-bottom: 10px;">资产分类</h3>
        <el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick"/>
      </el-col>
      <el-col :span="19">
        <el-row>
          <el-col :span="10">
            <div class="search-wrap">
              <el-input
                v-model="keyword"
                clearable
                style="width:300px;"
                placeholder="资产名称"
                @keyup.enter.native="handleFilter"
              />
              <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
              <el-button size="medium" type="info" @click="clearParams">清空</el-button>
            </div>
          </el-col>
          <el-col :span="2" :offset="12">
            <el-button type="primary" icon="el-icon-plus" @click="addNewList">新增</el-button>
          </el-col>
        </el-row>

        <el-table
          ref="assetTableData"
          :data="assetTableData"
          border
          class="assettable"
          style="width: 100%"
        >
          <el-table-column label="编号" align="center" width="100">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="名称"/>
          <el-table-column label="类型" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.assetsType | typeFilter }}</template>
          </el-table-column>
          <el-table-column label="时长" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.duration }}个小时</template>
          </el-table-column>
          <el-table-column label="价格" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.price }}元</template>
          </el-table-column>
          <el-table-column prop="creator" align="center" label="创建者"/>
          <el-table-column prop="createTimeStr" align="center" label="创建时间"/>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="handleClick(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :current-page="currentpage"
          :page-size="pagesize"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-row v-if="titleTab==='购买'" :gutter="20" style="margin-top:20px;">
      <el-col
        :span="4"
        style="border: 1px solid #eee;height: 600px;overflow: auto;margin-left: 10px;"
      >
        <h3 style="border-bottom:1px solid #eee;padding-bottom: 10px;">资产分类</h3>
        <el-tree :data="buyTreeData" :props="defaultProps" accordion @node-click="buyHandleNodeClick"/>
      </el-col>
      <el-col :span="19">
        <div class="search-wrap">
          <el-input v-model="buyKeyword" clearable style="width:300px;" placeholder="资产名称" @keyup.enter.native="buyHandleFilter"/>
          <el-button type="primary" icon="el-icon-search" @click="buyHandleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        </div>
        <el-table
          ref="buyAssetsTableData"
          :data="buyAssetsTableData.slice((buyCurrentpage-1)*buyPagesize,buyCurrentpage*buyPagesize)"
          border
          class="assettable"
          style="width: 100%">
          <el-table-column label="编号" align="center" width="100">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="名称"/>
          <el-table-column label="类型" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.assetsType | typeFilter }}</template>
          </el-table-column>
          <el-table-column label="时长" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.duration }}个小时</template>
          </el-table-column>
          <el-table-column label="价格" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.price ? scope.row.price : 0 }}元</template>
          </el-table-column>
          <el-table-column prop="creator" align="center" label="创建者"/>
          <el-table-column prop="createTimeStr" align="center" label="创建时间"/>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="buyHandleClick(scope.row)">查看</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="buyTotal"
          :current-page="buyCurrentpage"
          :page-size="buyPagesize"
          @handleSizeChange="buyHandleSizeChange"
          @handleCurrentChange="buyHandleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination' // 分页组件
  import {deleteAssetsById, getBuyAssetsUnitList, getBuyCategoryTreeList, getCategoryTreeList, getUserSelfAssetsUnitList} from '@/api/subject/digitalAssets' // 数据接口
  import {getTenantId, getUserId} from '@/utils/auth'

  export default {
    components: {
      Pagination
    },
    filters: {
      typeFilter(type) {
        const typeMap = {
          live: '直播',
          broadcast: '录播',
          courseware: '课件'
        }
        return typeMap[type]
      }
    },
    data() {
      return {
        titleTab: '自营',
        total: 0,
        currentpage: 1,
        pagesize: 10,
        buyTotal: 0,
        buyCurrentpage: 1,
        buyPagesize: 10,
        treeData: [],
        buyTreeData: [],
        assetTableData: [],
        buyAssetsTableData: [],
        keyword: '',
        buyKeyword: '',
        filterList: [],
        buyFilterList: [],
        defaultProps: {
          children: 'children',
          label: 'name',
          value: 'id'
        },
        treeNodeId: '',
        treeNodeName: '',
        buyTreeNodeId: ''
      }
    },
    watch: {
      titleTab: {
        handler(newData, oldData) {
          if (newData !== oldData) {
            this.getAssetsList()
          }
        }
      }
    },
    created() {
      this.getTreeData()
      this.getAssetsList()
    },
    methods: {
      handleFilter() {
        this.assetTableData = this.filterList.filter(item => {
          if (this.keyword && item.name.toLocaleLowerCase().indexOf(this.keyword.toLocaleLowerCase()) < 0) return false
          if (this.treeNodeId && item.categoryId !== this.treeNodeId.toString()) return false
          return true
        })
      },
      clearParams() {
        this.keyword = ''
        this.buyKeyword = ''
        this.getAssetsList()
      },
      buyHandleFilter() {
        this.buyAssetsTableData = this.buyFilterList.filter(item => {
          if (this.buyKeyword && item.name.toLocaleLowerCase().indexOf(this.buyKeyword.toLocaleLowerCase()) < 0) return false
          if (this.buyTreeNodeId && item.categoryId !== this.buyTreeNodeId.toString()) return false
          return true
        })
      },
      getTreeData() {
        getCategoryTreeList('course', getTenantId()).then(res => {
          this.treeData = res.data.items
        })
        getBuyCategoryTreeList('course', getTenantId()).then(res => {
          this.buyTreeData = res.data.items
        })
      },
      getAssetsList() {
        getUserSelfAssetsUnitList(getUserId()).then(res => {
          this.assetTableData = res.data.items
          this.filterList = res.data.items
          this.total = res.data.items.length
        })
        getBuyAssetsUnitList(getUserId()).then(res => {
          this.buyAssetsTableData = res.data.items
          this.buyFilterList = res.data.items
          this.buyTotal = res.data.items.length
        })
      },
      handleClick(row) {
        this.$router.push({name: 'Newasset', params: {data: row}})
      },
      buyHandleClick(row) {
        this.$router.push({name: 'Newasset', params: {data: row, disable: 'true'}})
      },
      handleDelete(row) {
        this.$confirm('是否确定删除该资产', '删除资产', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAssetsById(row.id).then(res => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getAssetsList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
      },
      handleNodeClick(data) {
        this.treeNodeId = data.id
        this.treeNodeName = data.name
        this.handleFilter()
      },
      buyHandleNodeClick(data) {
        this.buyTreeNodeId = data.id
        this.buyHandleFilter()
      },
      // 新增跳转
      addNewList() {
        if (this.treeNodeId) {
          this.$router.push({name: 'Newasset', params: {categoryId: this.treeNodeId, categoryName: this.treeNodeName}})
        } else {
          this.$message({
            message: '请先选择分类',
            type: 'warning'
          })
        }
      },
      handleSizeChange(val) {
        this.currentpage = 1
        this.pagesize = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentpage = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      buyHandleSizeChange(val) {
        this.buyCurrentpage = 1
        this.buyPagesize = val.value
        if (this.buyPagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      buyHandleCurrentChange(val) {
        this.buyCurrentpage = val.value
        if (this.buyPagesize >= 20) {
          scrollTo(50, 800)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .vesselBox {
    padding: 20px;

    .search-wrap {
      margin-bottom: 20px;
    }

    .assettable {
      margin-bottom: 20px;
    }
  }
</style>
